<app-toolbar>
  <nz-space>
    <button *nzSpaceItem nz-button nzType="primary" (click)="reload()">
      <i nz-icon nzType="reload" [nzSpin]="loading"></i>
      刷新
    </button>
    <app-search-box *nzSpaceItem (onSearch)="search($event)"></app-search-box>
    <button *nzSpaceItem nz-button nzType="primary" (click)="handleNew()">
      <i nz-icon nzType="plus"></i>
      创建网关
    </button>
    <button
      *nzSpaceItem
      nz-button
      nzType="primary"
      nzDanger
      (click)="handleBatchDel()"
    >
      批量删除
    </button>
  </nz-space>
</app-toolbar>

<nz-table
  #basicTable
  [nzData]="datum"
  [nzShowPagination]="false"
  [nzLoading]="loading"
  [nzScroll]="getTableHeight()"
  (nzQueryParams)="onQuery($event)"
>
  <thead>
    <tr>
      <th
        [nzChecked]="checked"
        [nzIndeterminate]="indeterminate"
        (nzCheckedChange)="handleAllChecked($event)"
      ></th>
      <th nzColumnKey="id" [nzSortFn]="true">ID</th>
      <th nzColumnKey="name" [nzSortFn]="true">名称</th>
      <th nzColumnKey="username" [nzSortFn]="true">用户名</th>
      <th nzColumnKey="password">密码</th>
      <th nzColumnKey="desc">描述</th>
      <th nzColumnKey="disabled">状态</th>
      <th nzColumnKey="created" [nzSortFn]="true">日期</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data; let i = index">
      <td
        [nzChecked]="setOfCheckedId.has(data.id)"
        (nzCheckedChange)="handleItemChecked(data.id, $event)"
      ></td>
      <td>{{ data.id }}</td>
      <td>{{ data.name }}</td>
      <td>{{ data.username }}</td>
      <td>{{ data.password }}</td>
      <td>{{ data.desc }}</td>
      <td >
        <nz-tag nzColor="success" *ngIf="data.disabled">
         启用
        </nz-tag>
        <nz-tag nzColor="error" *ngIf="!data.disabled">
          禁用
        </nz-tag>
        </td>
     
      <td>{{ data.created | date }}</td>
      <td>
        <a (click)="edit(data.id)">
          <i nz-icon nzType="edit"></i>
        </a>
        <nz-divider nzType="vertical"></nz-divider>
        <a
          nz-popconfirm
          nzPopconfirmTitle="确定删除?"
          (nzOnConfirm)="delete(data.id)"
          (nzOnCancel)="cancel()"
          nzPopconfirmPlacement="topLeft"
        >
          <i nz-icon nzType="delete"></i>
        </a>
        <nz-divider nzType="vertical"></nz-divider>
       
          <a *ngIf="!data.disabled" (click)="disable(1,data.id)">
           启用
          </a>
          <a   *ngIf="data.disabled" (click)="disable(0,data.id)">
            禁用
          </a>
          
      </td>
    </tr>
  </tbody>
</nz-table>
